<template>
  <div id="echart_pie" style="width:100%; height:300px;"></div>
</template>

<script>
import { dstPortTop20 } from '@/api/safe/access/auxiliary'
import resize from '@/pages/Home/components/mixins/resize'
export default {
  mixins: [resize],
  name: 'echart',
  data () {
    return {
      chart: null
    }
  },
  mounted () {
    this.drawPie()
  },
  methods: {
    drawPie () {
      // 基于准备好的dom，初始化echarts实例
      // let myChart = this.$echarts.init(this.$el)
      // 绘制图表
      // myChart.setOption({
      //   title: {
      //     text: '目的端口TOP20统计',
      //     subtext: '',
      //     left: 'left'
      //   },
      //   tooltip: {
      //     trigger: 'item',
      //     formatter: '{a} <br/>{b} : {c} ({d}%)'
      //   },
      //   series: [
      //     {
      //       name: '端口 : 数量',
      //       type: 'pie',
      //       radius: '70%',
      //       data: [],
      //       emphasis: {
      //         itemStyle: {
      //           shadowBlur: 10,
      //           shadowOffsetX: 0,
      //           shadowColor: 'rgba(0, 0, 0, 0.5)'
      //         }
      //       }
      //     }
      //   ]
      // })
      dstPortTop20().then(res => {
        if (res.status === 0 && res.info && res.info.length > 0) {
          res.info.forEach(item => {
            item.name = item.key
          })
          this.chart = this.$echarts.init(this.$el)
          this.chart.setOption({
            title: {
              text: this.$t('目的端口TOP20统计'),
              subtext: '',
              left: 'left'
            },
            tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            series: [
              {
                name: this.$t('端口 : 数量'),
                type: 'pie',
                radius: '70%',
                data: res.info,
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          })
          this.chart.on('click', this.pieClick)
        }
      })
    },
    pieClick (data) {
      this.$emit('pieClickSearch', data.name)
    }
  }
}
</script>

<style scoped>
</style>
